<template>
	<div id="read_test_vue" class="content" style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="tooltip" :style="{ left:state.menuPosition.x+'px',top:state.menuPosition.y+'px' }"
			@click.stop="addtopWord" v-if="state.wordTxt">加入单词本</div>
		<div class="t_a1">
			<div class="course-a"><span>首页 &gt;
					阅读剑雅真题A类
					&gt; 【阅读】{{ state.title }}
				</span></div>
			<div class="flex_item read-head">
				<div class="read-h flex_centen">READING</div>
				<div>
					<div class="read-j" v-if="state.content"><strong>{{state.content.sectionName}}</strong></div>
					<div class="read-j">
						<div>
							<span style="font-family: Arial; font-size: 16px;" v-html="state.content.demand"></span>
						</div>
					</div>
				</div>
				<div class="read-k flex_item" v-if="!state.contrastShow"><img
						src="../assets/read-time.png">答题时长：{{ state.timestr }}</div>
			</div>
			<div id="highlightable-content">
				<div id="middle_content" style="height: 680px;">
					<div id="single_left" class="flex" style="width: 50%; margin-right: 1.5%; position: relative;">
						<div class="sl-a" style="margin-top: 0;">
							<div v-for="(item,index) in state.sectionList" class="st-a"
								:class="{'st-a-active':state.sectionIndex==item.id}" @click="changeDo(item.id)">
								P<br>A<br>S<br>S<br>A<br>G<br>E<br>{{ index+1 }}</div>
						</div>
						<template v-for="(item1,index1) in state.sectionList">
							<div class="st-div-half" v-show="item1.id == state.sectionIndex">
								<div class="single-content" style="height: 96%; padding: 3%;background-color: #ffffff;">
									<div v-html="item1.content"></div>
								</div>
							</div>
						</template>
					</div>
					<div id="single_right" class="flex" style="position: relative;">
						<div class="read-dtk">
							<div class="single-content2"
								style="height: 580px; width: 300px;background-color: #EFEFEF;  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 15px 0px;"
								v-if="state.dtkShow">
								<div class="lt-table-a flex_centen">IELTS Listening Answer Sheet</div>
								<table class="list-table">
									<tbody>
										<tr>
											<td colspan="2" style="height: 0px; padding: 0px;"></td>
											<td style="height: 0px; padding: 0px;">
												<div class="flex_item" style="height: 0px;">
													<div class="lt-table-f flex_centen"><img src="../assets/pic6.png"
															style="position: absolute; top: 5px;"></div>
													<div class="lt-table-g">&nbsp;&nbsp;</div>
													<div class="lt-table-f flex_centen"><img src="../assets/pic5.png"
															style="position: absolute; top: 5px;"></div>
												</div>
											</td>
										</tr>
										<template v-for="(item1,index1) in state.examAnswerList" :key="index1">
											<tr class="lt-table-b2">
												<td class="lt-table-c">{{ item1.examNo }}</td>
												<td class="lt-table-d"><input type="text" placeholder="answers here"
														v-model="item1.userAnswer">
												</td>
												<td>
													<div class="flex_item" style="height: 100%;">
														<div class="lt-table-f flex_centen">
															<div class="lt-table-f2"></div>
														</div>
														<div class="lt-table-g">11</div>
														<div class="lt-table-f flex_centen">
															<div class="lt-table-f2"></div>
														</div>
													</div>
												</td>
											</tr>
										</template>
									</tbody>
								</table>
							</div>
							<img src="../assets/dtk_btn2.png" v-if="!state.dtkShow&&!state.contrastShow"
								@click="dtkShowChange()"> <img src="../assets/dtk_btn1.png"
								v-if="state.dtkShow&&!state.contrastShow" @click="dtkShowChange()">
						</div>
						<div class="st-div" style="position: relative;background-color: rgb(245, 247, 250);">
							<div class="single-content2" style="height: 96%; padding: 0px 3%;"
								v-if="!state.contrastShow">
								<template v-for="(item1,index1) in state.sectionList">
									<div v-show="item1.id == state.sectionIndex">
										<template v-for="(item2,index2) in item1.examList" :key="index2">
											<p class="st-c2" style="margin-top:20px;" v-if="item2.examType != 4">
												Questions{{item2.examNo}}</p>
											<div v-html="item2.demand"
												style="font-size:16px;line-height:32px;margin-bottom:16px;margin-bottom:20px;">
											</div>
											<div style="display:flex;">
												<span v-if="item2.examType == 4"
													style="flex-shrink: 0;font-weight: bold;font-size:16px;line-height:28px;margin-right:10px;">{{item2.examNo.indexOf('-')>0?item2.examNo.substring(0,item2.examNo.indexOf('-')):item2.examNo}}</span>
												<div v-html="item2.contentText"
													style="font-size:14px;line-height:28px;">
												</div>
											</div>
											<div class="selet_option" v-if="item2.examType == 4">
												<el-radio-group
													v-model="state.examAnswerList[item2.examNo-1].userAnswer">
													<el-radio :label="option.labels"
														v-for="(option,index) in state.judgeOptions"
														:key="index">{{option.content}}
													</el-radio>
												</el-radio-group>
											</div>
											<template v-if="item2.examType == 1">
												<div class="option">
													<el-radio-group
														v-model="state.examAnswerList[item2.examNo-1].userAnswer">
														<el-radio :label="option.labels"
															v-for="option in item2.examOptionList"
															:key="option.id">{{option.content}}
														</el-radio>
													</el-radio-group>
												</div>
											</template>

											<template v-if="item2.examType == 2">
												<template v-for="(v,k) in item2.examOptionList" :key="k">
													<div class="selet_option">
														<input type="checkbox"
															:disabled="state.options[item2.examNo+'length1']==0 && !state.options[item2.examNo][v.labels]"
															v-model="state.options[item2.examNo][v.labels]"
															@change="optionsChange(item2.examNo,v.labels)" />
														<span>{{v.labels}}.</span>
														{{v.content}}
													</div>
												</template>
											</template>
										</template>
									</div>
								</template>
							</div>
							<div class="single-content2" style="height: 96%; padding: 0px 3%;"
								v-else-if="state.contrastShow">
								<div id="testAnswer" class="single-content2"
									style="width: 100%; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 15px 0px;"
									:style="state.answeredindex ==0?'height:auto':'' ">
									<div class="lt-table-a flex_centen">IELTS Reading Answer Sheet</div>
									<table class="list-table">
										<tbody>
											<tr>
												<td></td>
												<td style="height: 0px; padding: 0px;">正确答案</td>
												<td style="height: 0px; padding: 0px;">
													我的答案
												</td>
												<td style="height: 0px; padding: 0px;">
													对/错
												</td>
											</tr>
											<template v-for="(item1,index1) in state.examAnswerList" :key="index1">
												<tr :class="{'lt-table-b2':index1%2==0}">
													<td class="lt-table-c">{{ item1.examNo }}</td>
													<td class="lt-table-d2">{{ item1.answer }}</td>
													<td class="lt-table-d2">{{ item1.userAnswer }}</td>
													<td class="lt-table-d2">
														<div class="flex_item" style="height: 100%;">
															<label
																style="margin: auto; font-size: 18px; color: rgb(255, 75, 64);"
																v-if="item1.answer!=item1.userAnswer">⨉</label>
															<label
																style="margin: auto; color: rgb(103, 194, 59); font-size: 20px;"
																v-else>○</label>
														</div>
													</td>
												</tr>
											</template>
										</tbody>
									</table>
								</div>

								<div class="single-content2"
									style="width: 100%; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 15px 0px;margin-top: 20px;"
									v-if="state.answeredindex ==1">
									<div class="lt-table-a flex_centen">IELTS Reading Answer Analysis</div>
									<div class="topPart">
										<div class="left">
											<div class="rightanswer">正确答案:
												<span>{{ state.examAnswerList[state.analysisIndex].answer }}</span>
											</div>
											<div class="myanswer">我的答案:
												<span>{{ state.examAnswerList[state.analysisIndex].userAnswer }}</span>
											</div>
										</div>
										<div class="right">
											<img src="../assets/pic9.png" @click="previous" />
											<text>第{{ Number(state.analysisIndex) +1 }}/{{ state.examAnswerList.length }}</text>
											<img src="../assets/pic10.png" @click="next" />
										</div>
									</div>
									<div class="analysisContent"
										v-html="state.examAnswerList[state.analysisIndex].analysis"></div>
								</div>
							</div>
						</div>
						<div class="read-l" style="position: absolute; right: -49px; top: 0px;"
							v-if="!state.contrastShow">
							<div class="flex_centen lt-btn2 lt-btn-active" @click="startTest(1)" v-if="!state.isStart">
								开始<br>测试</div>
							<div class="flex_centen lt-btn2" @click="stopTest(2)" v-if="state.isStart">
								暂停<br>测试</div>
							<div class="flex_centen lt-btn2" @click="reStartTest()">重新<br>开始</div>
							<div class="flex_centen lt-btn2" @click="submit()">交卷</div>
						</div>
						<div class="read-l" style="position: absolute; right: -49px; top: 0px;" v-else>
							<div class="flex_centen lt-btn2 " :class="{ 'lt-btn-active':state.answeredindex == 0 }"
								@click="answerCard">
								答题<br>卡</div>
							<div class="flex_centen lt-btn2" :class="{ 'lt-btn-active':state.answeredindex == 1 }"
								@click="viewanalysis">
								答案<br>解析</div>
							<div class="flex_centen lt-btn2" :class="{ 'lt-btn-active':state.answeredindex == 2 }"
								@click="reTest()">重新<br>测试</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		onBeforeUnmount,
		nextTick,
		inject
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		analysisIndex: 0,
		answeredindex: 0,
		personChange: [],
		isDisabled: [],
		checkId: [],
		content: {},
		test1: '',
		paperExamList: [

		],
		paperId: "",
		setInter: null,
		options: {

		},
		dtkShow: false,
		time: 0,
		timestr: '00:00',
		isStart: false,
		title: '',
		doIndex: 0,
		onemoreData: true,
		twomoreData: true,
		threemoreData: true,
		allData: '',
		contrastShow: false,
		answerList: [],
		wordTxt: '',
		menuPosition: {},
		answerId: '',
		sectionList: [],
		sectionIndex: 0,
		examAnswerList: [],
		judgeOptions: [{
				labels: 'A',
				content: 'TRUE/YES'
			},
			{
				labels: 'B',
				content: 'FALSE/NO'
			},
			{
				labels: 'C',
				content: 'NOT GIVEN'
			}

		]
	})


	function previous() {
		if (state.analysisIndex == 0) {
			return;
		}
		state.analysisIndex = state.analysisIndex - 1
	}

	function next() {
		if (state.analysisIndex == state.examAnswerList.length) {
			return;
		}
		state.analysisIndex = Number(state.analysisIndex) + 1
	}

	const submit = () => {
		if (!localStorage.getItem('token')) {
			alert('请先登录')
			window.open('/#/Login?showType=1', '_blank');
			return;
		}
		if (confirm('确定是否交卷')) {
			reStartTest()
			proxy.$http.post('/boot/user/userPaper/add', {
				paperId: state.paperId,
				paperExamList: state.examAnswerList
			}).then(res => {
				if (res.data.success) {
					getuserAnswer()
				} else {
					alert(res.data.message)
				}
			})
		}
	}

	document.addEventListener('contextmenu', function(event) {
		event.preventDefault(); // 阻止默认菜单
		state.menuPosition = event
		let txt = mouseSelectText()
		state.wordTxt = txt
	});

	document.addEventListener('click', (e) => {
		state.wordTxt = ''
	});

	function answerCard() {
		state.answeredindex = 0
	}

	function viewanalysis() {
		state.answeredindex = 1
	}

	function mouseSelectText() {
		return window.getSelection().toString();
	}

	function addtopWord() {
		proxy.$http.post('/boot/user/wordBook/add', {
			word: state.wordTxt
		}).then(res => {
			if (res.data.success) {
				alert(res.data.result)
				state.wordTxt = ''
			}
		})
	}

	function changeDo(id) {
		state.sectionIndex = id;
	}

	const startTest = () => {
		state.isStart = true
	}
	const reStartTest = () => {
		state.isStart = false
		state.time = 0
		state.timestr = '00:00'
	}
	const stopTest = () => {
		state.isStart = false
	}
	const dtkShowChange = () => {
		state.dtkShow = !state.dtkShow
	}

	const optionsChange = (key1, key2) => {
		let num = 0
		let examNoStart = key1.substring(0, key1.indexOf('-'))
		let examNoEnd = key1.substring(key1.indexOf('-') + 1, key1.length)
		for (let i = examNoStart; i <= examNoEnd; i++) {
			state.examAnswerList[i - 1].userAnswer = ''
		}
		for (let item in state.options[key1]) {
			if (state.options[key1][item]) {
				state.examAnswerList[examNoStart - 1 + num].userAnswer = item
				num++
			}
		}
		setTimeout(function() {
			state.options[key1 + 'length1'] = state.options[key1 + 'length'] - num
		}, 100)
	}

	const getContent = () => {
		if (route.query.id) {
			state.paperId = route.query.id
		}
		proxy.$http.get('/boot/api/questions/paper/queryById?id=' + state.paperId).then(res => {
			if (res.data.success) {
				state.paper = res.data.result
				state.sectionList = state.paper.sectionList
				let answerList = []
				state.sectionList.forEach((section, index) => {
					if (index == 0) {
						state.sectionIndex = section.id;
					}
					let examAnswerList = [];
					section.examList.forEach((exam) => {
						if (exam.examType == '2') {
							let examNoStart = exam.examNo.substring(0, exam.examNo.indexOf(
								'-'))
							let examNoEnd = exam.examNo.substring(exam.examNo.indexOf('-') + 1,
								exam.examNo.length)
							let arrLength = examNoEnd - examNoStart + 1
							state.options[exam.examNo] = {
								A: false,
								B: false,
								C: false,
								D: false,
								E: false,
								F: false,
								G: false,
								H: false,
							}
							state.options[exam.examNo + 'length'] = arrLength
							state.options[exam.examNo + 'length1'] = arrLength
						}
						if (exam.examNo.indexOf('-') > 0) {
							let startNum = Number(exam.examNo.substring(0, exam.examNo.indexOf(
								'-')))
							let endNum = Number(exam.examNo.substring(exam.examNo.indexOf(
								'-') + 1))
							for (let i = startNum; i <= endNum; i++) {
								let input_ = 'input_' + i
								//用regExp对象处理
								let reg = new RegExp(input_);
								exam.contentText = exam.contentText
									.replace(reg, `<input id="question` + i +
										`"data-answer-id="11844" data-question-num="4" click="changInput('1')" style="text-align: center" type="text" placeholder="` +
										i +
										`" class="answer answer-11844" autocomplete="off" autocomplete="new-password">`
									)
							}
						}
						examAnswerList = examAnswerList.concat(exam.examAnswerList)
					})
					section.examAnswerList = examAnswerList;
					answerList = answerList.concat(examAnswerList);
				})
				state.examAnswerList = answerList;
				console.log(state.examAnswerList)
			}
		})
	}

	function getuserAnswer() {
		if (route.query.id) {
			state.paperId = route.query.id
		}
		proxy.$http.get('/boot/user/userPaper/queryByPaperId?paperId=' + state.paperId).then(res => {
			let answerList = res.data.result.paperExamList
			state.answerId = res.data.result.id
			if (answerList && answerList.length > 0) {
				state.contrastShow = true
				state.examAnswerList = res.data.result.paperExamList
			} else {
				state.contrastShow = false
				state.examAnswerList = []
			}
		})
		getContent()
	}

	function reTest() {
		state.contrastShow = false
		state.answerList = []
		state.answeredindex = 2
		proxy.$http.delete('/boot/member/userPaper/delete?id=' + state.answerId).then(res => {
			console.log(res)
		})
	}
	onMounted(() => {
		clearInterval(state.setInter)
		state.setInter = setInterval(() => {
			for (let i = 0; i < 50; i++) {
				if (document.getElementById('question' + i) != null) {
					state.examAnswerList[i - 1].userAnswer = document.getElementById('question' + i)
						.value
				}
			}
			if (state.isStart) {
				state.time++
				let m = parseInt(state.time / 60)
				let s = state.time % 60
				state.timestr = (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s)
			}
		}, 1000);
	})

	onBeforeUnmount(() => {
		clearInterval(state.setInter)
		state.setInter = null
	})
	getuserAnswer()
</script>
<style lang="scss" scoped>
	.topPart {
		width: 100%;
		height: 80px;
		border-bottom: 1px solid #cccccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;

		.left {
			.rightanswer {
				span {
					color: green;
				}
			}
		}

		.right {
			img {
				width: 18px;
				height: 18px;
				cursor: pointer;
			}
		}

	}

	.analysisContent {
		padding: 10px;
	}

	.st-a {
		text-align: center;
		height: 110px;
		line-height: 13px;
		font-weight: 900;
	}

	.st-div-half {
		width: 100%;
	}

	.selet_option {
		// height: 23px;
		line-height: 32px;
		display: flex;
		align-items: center;
		font-size: 16px;

		input {
			width: 18px;
			height: 18px;
			background: #edeff1;
			border: none;
			border-radius: 2px;
			margin-left: 0;
			--active-inner: #23c4f8;
			outline: none;
		}

		span {
			font-weight: bold;
			display: block;
			width: 22px;
		}
	}

	.modal-round {
		background: rgb(188, 188, 188);
		color: white;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		font-size: 10px;
	}

	.lt-a {
		font-size: 16px !important;
		padding: 0 4% 10px 2% !important;
	}

	.lt-a1,
	.lt-a2 {
		line-height: 20px;
	}

	.lt-a1 {
		width: 7% !important;
		margin-right: 1%;
		font-family: Arial;
	}

	.st-div table {
		background-color: white;
	}

	.lt-table-d {
		width: 53%;
	}

	.lt-table-g {
		padding-top: 1px;
	}

	.qt-b {
		display: inline-flex;
	}

	.qt-b strong {
		margin-right: 0px;
		width: 25px;
	}

	.qt-b div {
		width: fit-content;
		white-space: pre-wrap;
	}

	.e-title {
		display: flex;
		justify-content: center;
		font-size: 25px;
		font-weight: 700;
		margin-bottom: 1.2rem;
		margin-top: 15px;
	}

	.qt-g {
		font-weight: unset !important;
	}

	.t_f_box {
		display: flex;

		>div {
			display: flex;
			align-items: center;
			margin-right: 30px;
		}

		.select {
			background: #edeff1;
			width: 18px;
			height: 18px;
			border-radius: 24px;
			margin-right: 10px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;

			.arc {
				width: 8px;
				height: 8px;
				border-radius: 12px;
				background: #3794ff;
			}
		}
	}

	.tooltip {
		color: red;
		cursor: pointer;
		opacity: 1;
		padding: 5px 8px;
		background: rgb(255, 239, 238);
		border-radius: 4px;
		box-shadow: rgba(159, 159, 159, 0.5) 0px 1px 5px 0px;
		top: 344px;
		left: 716px;
		position: absolute;
	}
</style>